<template>
  <div class="elme-form">
    <a-form-model
      :ref="formRef"
      :model="formValue"
      :label-col="{ span: labelCol }"
      :wrapper-col="{ span: wrapperCol }"
      v-bind="$attrs"
      v-on="$listeners"
      :class="formClass?'form_list '+formClass:'form_list'"
    >
      <div
        class="form_item"
        v-for="(item,index) in formData"
        :key="index"
        :style="{ width:item.width?item.width:'50%',display:item.hide?'none':'block'}"
      >
        <a-form-model-item :ref="item.ref" :label="item.label" :prop="item.prop">
          <template v-if="item.type==='input'">
            <a-input
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :maxLength="item.maxLength?item.maxLength:30"
              :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"
              :allowClear="item.allowClear?item.allowClear:false"
            />
          </template>
          <template v-else-if="item.type==='textarea'">
            <a-textarea
              v-model="formValue[item.prop]"
              :size="size"
              :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"
              :auto-size="{ minRows: item.minRows?item.minRows:3, maxRows: item.maxRows?item.maxRows:5 }"
              :allowClear="item.allowClear?item.allowClear:false"
              :disabled="item.disabled?item.disabled:false"
              :maxLength="item.maxLength?item.maxLength:30"
              resize="none"
            />
          </template>
          <template v-else-if="item.type==='password'">
            <a-input-password
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :maxLength="item.maxLength?item.maxLength:30"
              :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"
              :allowClear="item.allowClear?item.allowClear:false"
            />
          </template>
          <template v-else-if="item.type==='select'">
            <a-select
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :placeholder="item.placeholder?item.placeholder:'请选择'+item.label"
              :allowClear="item.allowClear?item.allowClear:false"
              @change="item.callback"
            >
              <a-select-option
                :value="selItem.value"
                v-for="(selItem,selIndex) in item.options"
                :key="selIndex"
              >{{selItem.label}}</a-select-option>
            </a-select>
          </template>
          <template v-else-if="item.type==='time'">
            <a-date-picker
              show-time
              type="date"
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :placeholder="item.placeholder?item.placeholder:'请选择'+item.label"
              :allowClear="item.allowClear?item.allowClear:false"
              style="width: 100%;"
              :valueFormat="item.valueFormat?item.valueFormat:'YYYY-MM-DD HH:mm:ss'"
              @change="item.callback"
            />
          </template>
          <template v-else-if="item.type==='timeRegion'">
            <a-range-picker
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :allowClear="item.allowClear?item.allowClear:false"
              style="width: 100%;"
              :valueFormat="item.valueFormat?item.valueFormat:'YYYY-MM-DD'"
              @change="item.callback"
            />
            <!-- :placeholder="item.placeholder?item.placeholder:'请选择'+item.label" -->
          </template>
          <template v-else-if="item.type==='checkbox'">
            <a-checkbox-group
              v-model="formValue[item.prop]"
              :disabled="item.disabled?item.disabled:false"
              @change="item.callback"
            >
              <a-checkbox
                :value="selItem.value"
                v-for="(selItem,selIndex) in item.options"
                :key="selIndex"
                :name="item.prop"
              >{{selItem.label}}</a-checkbox>
            </a-checkbox-group>
          </template>
          <template v-else-if="item.type==='radio'">
            <a-radio-group
              v-model="formValue[item.prop]"
              :disabled="item.disabled?item.disabled:false"
              @change="item.callback"
            >
              <a-radio
                :value="selItem.value"
                v-for="(selItem,selIndex) in item.options"
                :key="selIndex"
              >{{selItem.label}}</a-radio>
            </a-radio-group>
          </template>
          <template v-else-if="item.type==='cascader'">
            <a-cascader
              :options="item.options"
              v-model="formValue[item.prop]"
              :size="size"
              :disabled="item.disabled?item.disabled:false"
              :placeholder="item.placeholder?item.placeholder:'请选择'+item.label"
              :allowClear="item.allowClear?item.allowClear:false"
              style="width: 100%;"
              @change="item.callback"
            />
          </template>
          <template v-else-if="item.type==='upload'">
            <div class="el_upload" @click="uploadFun(item.customRequest)">
              {{formValue[item.prop]?'已上传':'点击上传'}}
            </div>
          </template>
        </a-form-model-item>
      </div>
      <slot></slot>
      <div :class="formButton.btnClass?formButton.btnClass+' btn_list':'btn_list'" v-if="formButton">
        <a-button
          :class="formButton.cancelCalss?'reset_btn '+formButton.cancelCalss:'reset_btn'"
          :size="size"
          @click="cancelFun"
        >{{formButton.cancelText?formButton.cancelText:'取消'}}</a-button>
        <a-button
          type="primary"
          :class="formButton.confirmCalss"
          :size="size"
          @click="confirmFun"
        >{{formButton.confirmText?formButton.confirmText:'确认'}}</a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: "elme-form",
  props: {
    // 表单配置
    formData: {
      type: Array,
      default: function () {
        return [
          {
            type: "input", //表单项类型，必填。目前支持:input,textarea,password,select,time,timeRegion,checkbox,radio,cascader
            label: "输入框提示", //输入框的label，必填
            prop: "id", //表单项的字段名称，必填
            ref: "ref", //每一项的ref
            width: "50%", //一行的占比，默认一行两个
            hide: false, //是否隐藏这一项，默认显示
            disabled: false, //是否禁用，默认false
            maxLength: 30, //最大长度	，默认30
            placeholder: "请输入XXX", //输入提示
            allowClear: false, //可以点击清除图标删除内容
            minRows: 3, //textarea的最小行数，默认为3
            maxRows: 3, //textarea的最大行数，默认为5
            callback: function () {}, //输入框值改变时触发的回调，
            options: [], //select,checkbox,radio,的选择器里面{label:'选项一',value:'1'}的结构，
            valueFormat: "YYYY-MM-DD HH:mm:ss", //日期时间选择器的值格式化
          },
        ];
      },
    },
    // 表单的值
    formValue: {
      type: Object,
      default: function () {
        return {};
      },
    },
    // 文字宽的宽度
    labelCol: {
      type: Number,
      default: 6,
    },
    // 输入宽的宽度
    wrapperCol: {
      type: Number,
      default: 17,
    },
    // 输入框的大小
    size: {
      type: String,
      default: "default",
    },
    // form表单的ref
    formRef: {
      type: String,
      default: "formRef",
    },
    // form表单的class
    formClass: {
      type: String,
      default: "",
    },
    // form表单的按钮配置，如果不需要则传null
    formButton: {
      type: Object,
      default: function () {
        return {
          cancelFun: () => {}, // 取消的回调
          confirmFun: () => {}, //确认的回调
          cancelCalss: "", //取消按钮的class
          confirmCalss: "", //确认按钮的class
          cancelText: "", //取消按钮的文字，默认为取消
          confirmText: "", //确认按钮的文字，默认为确认
          isRule: false, //是否需要表单校验，如果为true，则confirmFun会接收一个Boolean类型的参数，true为校验通过，false为不通过
        };
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    // 表单校验通过时为true
    validateForm() {
      let flag = false;
      this.$refs[this.formRef].validate((valid) => {
        if (valid) {
          flag = true;
        }
      });
      return flag;
    },
    // 重置表单
    resetForm() {
      for (let key in this.formValue) {
        this.formValue[key] = undefined;
      }
    },
    // 取消按钮
    cancelFun() {
      this.resetForm();
      this.formButton.cancelFun();
    },
    // 确认按钮
    confirmFun() {
      if (this.formButton.isRule) {
        this.formButton.confirmFun(this.validateForm());
      } else {
        this.formButton.confirmFun();
      }
    },
    // 简单的上传
    uploadFun(callback){
      let input = document.createElement("input");
      input.type = "file";
      input.click();
      input.onchange = (e) => {
        // input.files[0] 是获取到的文件
        // console.log(input.files[0],'==========');
        if (callback) {
          callback(input.files[0])
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.elme-form {
  .form_list {
    display: flex;
    flex-flow: wrap;
  }
  .btn_list {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    padding-right: 24px;
    height: 40px;
    margin-bottom: 24px;
    align-items: center;
    .reset_btn {
      margin-right: 20px;
    }
  }
  .el_upload{
    width: 150px;
    height: 80px;
    // background: #f5f5f5;
    cursor: pointer;
    border-radius: 5px;
    border: 1px dashed #cfcfcf;
    font-size: 14px;
    color: #0085D0;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
